<template>
  <el-col>
    <el-form
      class="widget-table widget-view widget-view-drag"
      :class="{
        active: selectWidget.key && selectWidget.key == element.key

      }"
      :label="getLable(element)"
      @click.native.stop="handleSelectWidget(index)"
    >

      <div class="sub-header" ng-click="selectField(field)">

        <h4 class="ng-binding" style="margin:8px">{{ element.options.showTitle==undefined?(element.name): element.options.showTitle?element.name:"" }}</h4>
      </div>

      <div class="widget-table-wrapper">
        <div class="widget-table-content">
          <draggable
            v-model="element.tableColumns"
            v-bind="{group:{name: 'people', put: handlePut}, ghostClass: 'ghost',animation: 200, handle: '.drag-widget'}"
            :no-transition-on-drag="true"
            @add="handleWidgetTableAdd($event, element)"
            @change="handleWidgetTableChange"
          >

            <transition-group name="fade" tag="div" class="widget-table-col" style="96%">

              <widget-card-item
                v-for="(item, index) in element.tableColumns"
                v-if="item.key"
                :key="item.key"
                :element="item"
                :select.sync="selectWidget"
                :index="index"
                :data="element.tableColumns"
                @select-change="handleSelectChange($event, item)"
              >
                <el-row />
              </widget-card-item>
            </transition-group>

          </draggable>

        </div>
      </div>

      <div class="widget-view-action widget-col-action">
        <button v-if="selectWidget.key == element.key" type="button" class="show-circle action-delete" @click.stop="handleWidgetDelete(index)">
          <i class="iconfont icon-trash" />
        </button>

      </div>

    </el-form>
  </el-col>
</template>

<script>
import Draggable from 'vuedraggable'
import WidgetCardItem from './WidgetCardItem'
import { getLable } from '../../js/formUtils.js'
export default {
  components: {
    Draggable,
    WidgetCardItem
  },
  props: ['element', 'select', 'index', 'data'],
  data() {
    return {
      selectWidget: this.select
      // columnsWidthStyle: '96%'
    }
  },
  watch: {
    select(val) {
      this.selectWidget = val
    },
    selectWidget: {
      deep: true,
      handler(val) {
        this.$emit('update:select', val)
      }
    },
    element: {
      deep: true,
      handler(val) {

      //  this.calcTableColumnsWidth()
      }
    }
  },
  mounted() {

    // this.calcTableColumnsWidth()
  },
  methods: {
    getLable: function(element) {
      return getLable(element)
    },
    handleSelectWidget(index) {
      this.selectWidget = this.data.list[index]
    },
    handleWidgetDelete(index) {
      if (this.data.list.length == 1) {
        this.$emit('select-change', -1)
      } else {
        if (this.data.list.length - 1 == index) {
          this.$emit('select-change', index - 1)
        } else {
          this.$emit('select-change', index)
        }
      }

      this.data.list.splice(index, 1)
    },
    handleWidgetTableChange($event) {

    },
    calcTableColumnsWidth() {
      // this.columnsWidth = (this.element.tableColumns.length+1)*200

      this.columnsWidthStyle = 'calc(200px)'

      const widthArray = []

      for (let i = 0; i < this.element.tableColumns.length; i++) {
        if (!this.element.tableColumns[i].options.width || this.element.tableColumns[i].options.width == '100%') {
          widthArray.push('200px')
        } else {
          widthArray.push(this.element.tableColumns[i].options.width)
        }
      }

      this.columnsWidthStyle = `calc(200px + ${widthArray.join(' + ')})`
    },
    handlePut(a, b, c) {
      if (c.className.indexOf('widget-col') >= 0 || c.className.indexOf('widget-table') >= 0 || c.className.indexOf('no-put') >= 0 || c.children[0].className.indexOf('no-put') >= 0) {
        return false
      }
      return true
    },
    handleWidgetTableAdd($event, table) {
      const newIndex = $event.newIndex
      const key = new Date().getTime() + ''
      this.$set(table.tableColumns, newIndex, {
        ...table.tableColumns[newIndex],
        options: {
          ...table.tableColumns[newIndex].options,
          remoteFunc: table.tableColumns[newIndex].options.remoteFunc || 'func_' + key,
          width: '200px'
        },
        novalid: {
          ...table.tableColumns[newIndex].novalid
        },
        key,
        model: table.tableColumns[newIndex].model ? table.tableColumns[newIndex].model : table.tableColumns[newIndex].type + '_' + key,
        rules: table.tableColumns[newIndex].rules ? [...table.tableColumns[newIndex].rules] : []
      })

      if (Object.keys(table.tableColumns[newIndex].options).includes('options')) {
        this.$set(table.tableColumns, newIndex, {
          ...table.tableColumns[newIndex],
          options: {
            ...table.tableColumns[newIndex].options,
            options: [...table.tableColumns[newIndex].options.options.map(item => ({
              ...item
            }))]
          }
        })
      }

      this.selectWidget = table.tableColumns[newIndex]
    },
    handleSelectChange(index, item) {
      setTimeout(() => {
        index >= 0 ? (this.selectWidget = this.element.tableColumns[index]) : (this.selectWidget = {})
      })
    }
  }
}
</script>
<style>
.el-input {
    /* width: 100%  !important; */
}

.el-textarea {
    /* width: 100%  !important; */
}
</style>

